<template>
  <div>
    <common-head title="购物车"/>
    <div class="wrap">
      <div class="items">
        <van-swipe-cell
          v-for="(item,index) in cart.items"
          :key="item.id"
        >
          <div class="item-wrap">
            <van-checkbox
              v-model="item.checked"
              @click="singleChange"
              />
            <van-card
              :num="item.num"
              :price="item.minPrice"
              :title="item.name"
              :thumb="item.pic"
            >
              <template #footer>
                <van-stepper @change="numChange" v-model="item.num" />
              </template>
            </van-card>
          </div>
          <template #right>
            <van-button
              square text="删除"
              type="danger"
              @click="delItem(index)"
              class="delete-button" />
          </template>
      </van-swipe-cell>
      </div>
    </div>
    <van-submit-bar :price="cart.total*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox @click="allCheckedChange" v-model="cart.allChecked">全选</van-checkbox>
    </van-submit-bar>
    <my-tabbar/>
  </div>
</template>

<script>
import MyTabbar from '../../components/MyTabbar.vue'
import CommonHead from 'components/CommonHead'
import { mapState, mapMutations } from 'vuex'
import { Dialog, Notify } from 'vant'
import { isLogin } from 'utils'
export default {
  components: {
    MyTabbar,
    CommonHead
  },
  created () {
    this.calc_total() // 计算总价格
  },
  methods: {
    delItem (index) {
      // 删除商品
      Dialog.confirm({
        title: '删除',
        message: '确认删除吗?'
      })
        .then(() => {
          this.del_item(index)
          this.calc_total()
          Notify({ type: 'success', message: '删除成功' })
        })
        .catch(() => {
        // on cancel
        })
    },
    allCheckedChange () {
      // 点击全选
      console.log(this.cart.allChecked)
      this.set_allChecked_all(this.cart.allChecked)
      this.calc_total()
    },
    singleChange () {
      // 点击复选框
      this.set_cart(this.cart)
      this.calc_total()
      // 改变全选状态
      const allChecked = this.cart.items.every(item => item.checked)
      this.set_allChecked(allChecked)
    },
    numChange () {
      // 商品购买数量改变
      this.set_cart(this.cart)
      this.calc_total()
    },
    setOrderContact () {
      // 设置订单的联系人
      /*
      先判断 联系人列表是否为空
      所有联系人中，先找 默认联系人，如果没有找第一个
      */
      if (!this.contacts.length) {
        return {}
      }
      let contact = {}
      const defaultContact = this.contacts.find(contact => contact.isDefault)
      if (defaultContact) {
        contact = defaultContact
      } else {
        contact = this.contacts[0]
      }
      return contact
    },
    onSubmit () {
      if (isLogin()) {
        // 生成订单
        const currentOrder = {
          id: Date.now(),
          code: Date.now(),
          items: this.cart.items.filter(item => item.checked),
          status: 0,
          total: this.cart.total,
          contact: this.setOrderContact()
        }
        this.set_current_order(currentOrder)
        // 跳转到订单
        this.$router.push('/order')
      } else {
        this.$router.push({
          path: '/login',
          query: {
            from: '/cart'
          }
        })
      }
    },
    ...mapMutations('cart', ['calc_total', 'set_cart', 'set_allChecked', 'set_allChecked_all', 'del_item']),
    ...mapMutations('order', ['set_current_order'])
  },
  computed: {
    ...mapState({
      // 注意 如果 state 中的数据 是 对象 最好
      cart: state => JSON.parse(JSON.stringify(state.cart.cart)),
      contacts: state => state.contact.contacts
    })
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  margin-top: 46px;
  margin-bottom: 50px;
}
.delete-button {
    height: 100%;
  }
.item-wrap{
  display: flex;
  align-items: center;
  background-color: #fafafa;
  .van-checkbox{
    margin:0 5px;
  }
  .van-card{
    flex:1;
  }
}
</style>
